
import React, { useState } from "react"
import { useEffect } from "react";
import { useChilType } from "../../hook/childType";
import { Breadcrumb, Card, Select, Input, Button, message, Table } from 'antd';  //ui组件
import _ from "lodash"

const { Option } = Select;

export default () => {
    const [{
        curPage,
        eachPage,
        total,
        maxPage,
        rows, TatolData
    }, { getChilType, addchild, selectfromTotalType, delchildOne,resOneChildType }] = useChilType()
    const [addinfo, setAddInfo] = useState({})


    useEffect(() => {
        getChilType();
    }, [curPage,
        eachPage,])
    //下拉列表事件
    function onChange(value) {
        selectfromTotalType({ Father_id: value })
    }
    // 新增的父类新下拉
    function addChange(value) {
        setAddInfo({ ...addinfo, Father_id: value })

    }
    // 新增时候输入框的值
    function addvalue(e) {
        setAddInfo({ ...addinfo, childType_name: e.target.value })

    }

    // 新增确认按钮
    function toaddInfo() {
        Object.keys(addinfo).length == "2" ? addchild(addinfo) : message.error("还未完成输入")
    }

    // 删除按钮
    async function delOne(_id) {
        const data = await delchildOne({ _id })
        data.ok== "1" ? message.success("删除成功") : message.error("删除失败")

    }
    // 修改触发的函数
   async function reschildType({ childType_name,_id }){
      const data=await resOneChildType({ childType_name,_id });
      console.log(data);

    }

    const columns = [
        {
            title: () => (<span>
                所属父类型 :
                <Select
                    placeholder="全部"
                    showSearch
                    style={{ width: 200, marginLeft: "20px" }}
                    optionFilterProp="children"
                    onChange={onChange}
                    // onSearch={onSearch}
                    filterOption={(input, option) =>
                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    rules={[{ required: true, message: 'Please input your password!' }]}
                >

                    {
                        _.map(TatolData, (item) => {
                            return <Option value={item._id} key={item._id}>{item.totalType_name}</Option>
                        })}
                </Select>
            </span>),
            key: 'Father_id',
            render: (text, record, index) => {
                const value = record.Father_id ? record.Father_id.totalType_name : "无"
                return value

            }

        },
        {
            title: '商品子类列表',
            key: 'childType_name',
            render: (text, record, index) => {
                const { childType_name,_id } = record
                return <Input defaultValue={childType_name} onBlur={(e)=>reschildType({ childType_name:e.target.value,_id })} style={{ width: "200px" }} />

            }

        },
        {
            title: '操作',
            key: 'option',
            render: (text, record, index) => {
                const { _id } = record
                return <Button onClick={() => delOne(_id)}>删除</Button>

            }

        },


    ]



    return (
        <div>
            <Card bordered={false} style={{ width: "100%" }}>
                <Breadcrumb>
                    <Breadcrumb.Item>首页</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">商品类型</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>商品子类列表</Breadcrumb.Item>
                </Breadcrumb>
            </Card>
            <Card>
                <span>新曾：</span>    <span>选择父类型</span>
                <Select
                    placeholder="全部"
                    showSearch
                    style={{ width: 200 }}
                    optionFilterProp="children"
                    onChange={addChange}
                    // onSearch={onSearch}
                    filterOption={(input, option) =>
                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    rules={[{ required: true, message: 'Please input your password!' }]}
                >
                    {
                        _.map(TatolData, (item) => {
                            return <Option value={item._id} key={item._id}>{item.totalType_name}</Option>
                        })}
                </Select>
                <Input style={{ width: "200px" }} onChange={addvalue} />
                <Button onClick={toaddInfo}>新增</Button>

                <Table columns={columns} dataSource={rows} rowKey={record => record._id} />


            </Card>

        </div>
    )
}